import React, { useEffect, useState } from 'react'

export default function Mouse() {
    let [x, setX] = useState(40);
    let [y, setY] = useState(40);
    function move(e) {
        console.log('e: ', e.clientX, e.clientY);
        setX(e.clientX - 60);
        setY(e.clientY - 60);
    }
    useEffect(() => {//componentDidMount
        // 绑定自定事件
        window.addEventListener('mousemove', move)
        return () => {
            window.removeEventListener('mousemove', move)
        }
    }, [])
    return (
        <div
            style={
                {
                    width: 50,
                    height: 50,
                    background: 'green',
                    position: 'absolute',
                    left: x,
                    top: y
                }
            }
        >Mouse</div>
    )
}
